<template>
  <div class="app-footer-nav">
    <span v-if="storeType=='3501' || storeType=='3505'" class="action-add" @click="handleActionAdd">+</span>
    <mt-popup
      v-model="popupAdd"
      position="bottom"
      class="footer-other-content">
      <ul class="popup-add-body">
        <li class="item">
          <span class="iconfont icon-tiaoma" style="color: #e0964b"></span>
          扫描车牌开单
        </li>
        <li class="item">
          <span class="iconfont icon-zhengjianleixing" style="color: #4c91ca"></span>
          扫描行驶证开户
        </li>
        <li class="item">
          <span class="iconfont icon-tiaomacaiji" style="color: #040404"></span>
          扫码添加配件
        </li>
      </ul>
      <div class="popup-add-footer" @click="popupAdd=false">
        <span class="iconfont icon-close2"></span>
      </div>
    </mt-popup>
    <ul class="footer-nav-content">
      <li v-for="(item,index) in navList" class="item" :class="{active:current==index}">
        <router-link class="item-content" :to="{path:item.url}"><span class="iconfont" :class="item.iconClass"></span>{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    props:{
      current:'',
      storeType:'',
    },
    data(){
      return {
        popupAdd:false,
        counter:0,
        navList:[
          {
            iconClass:'icon-fenlei-',
            title:'工作台',
            url:'/index'
          },{
            iconClass:'icon-user',
            title:'个人中心',
            url:'/member-center'
          }
        ]
      }
    },
    methods:{
      handleActionAdd(){
        this.popupAdd=true
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
  .app-footer-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  background:#fff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  }
  .app-footer-nav .footer-other-content{
    background: rgba(255,255,255,0.9);
    width: 100%;
    height: 100%;
  }
  .app-footer-nav .action-add{
    position: absolute;
    top:-44px;
    left: 50%;
    z-index: 90;
    display: block;
    width:40px;
    height: 40px;
    background:#007EE5;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin-left:-18px;
    line-height: 36px;
  }
  .app-footer-nav .footer-nav-content{
    display: flex;
    position: relative;
    z-index: 100;
    background: #fff;
  }
  .app-footer-nav .popup-add-body .iconfont{
    display: block;
    margin:0 auto 4px;
    font-size: 32px;
  }
  .app-footer-nav .footer-other-content .popup-add-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding:16px 0;
    text-align: center;
    border-top: 1px solid #ddd;
    color:#007EE5;
  }
  .app-footer-nav .popup-add-body{
    display: flex;
    height: 100%;
    align-items: center;
  }
  .app-footer-nav .footer-other-content .popup-add-footer .icon-close2{
    font-size: 24px;
  }
  .app-footer-nav .footer-nav-content .iconfont{
    display: block;
    margin:0 0 2px;
    font-size: 23px;
  }

  .app-footer-nav .item{
    width: 50%;
    padding:6px 0;
    text-align: center;
    font-size:12px;
  }

  .app-footer-nav .item.active .item-content{
    display: block;
    color:#007EE5;
  }
  .app-footer-nav .item-content{
    color: #888;
  }

</style>
